<template>
  <div class="vuex-container">
    <h5>vuex使用学习-顶级组件</h5>
    <div class="left-top">
      <div class="info">
        <div>数据</div>
        <button @click="changeSigle">改bar</button>
        <button @click="changeSigle2">改foo</button>
        <button @click="changeObject">改对象</button>
        <button @click="changemodule">改module数据</button>
        <button @click="changeDept">修改部门数据</button>
        <div>{{ $store.state.count }}</div>
        <div>获取的性别数据{{ sex }}</div>
        <div>查看部门数据{{ deptName }}</div>
        <ul>
          <li>name:{{ stateName }}</li>
          <li>age:{{ state.age }}</li>
          <li>friend:{{ state.friend }}</li>
          <li>运动:{{ $store.state.sports }}</li>
          <li>modle中的值{{ moduleMsg }}</li>
          <li>modle中的值2{{ msg2 }}</li>
        </ul>
        <ul>
          <li>父组件的数据</li>
          <li>测试一个单独的值bar {{ bar }}</li>
          <li>测试一个单独的值foo {{ foo }}</li>
          <li>测试一个对象的值baz.hello {{ baz.hello }}</li>
        </ul>
      </div>
      <div class="son">
        <childrenC></childrenC>
      </div>
    </div>
    <div class="content">
      <childrenA></childrenA>
      <childrenB></childrenB>
    </div>
  </div>
</template>

<script>
import childrenA from './childrenA'
import childrenB from './childrenB'
import childrenC from './childrenC'
import { mapState, mapMutations } from 'vuex'
import myChange from '../JS/myChange'
export default {
  name: 'vuex-root',
  components: {
    childrenA,
    childrenB,
    childrenC
  },
  data() {
    return {
      foo: 'foo',
      bar: 'bar',
      baz: { hello: 'world' },
      deptName: '测试部'
    }
  },
  provide() {
    return {
      foo: this.foo,
      baz: this.baz,
      bar: () => this.bar
    }
  },
  created() {
    console.log(this.$store.state)
  },
  computed: {
    state() {
      return this.$store.state
    },
    stateName() {
      return this.$store.state.name
    },
    sex() {
      return this.$store.getters.genderbos
    },
    moduleMsg() {
      return this.$store.state.jiankang.msg
    },
    ...mapState({ msg2: state => state.jiankang.msg2 })
  },
  methods: {
    ...mapMutations(['jiankang/changeName', 'jiankang/changeMsg2']),
    changeSigle() {
      this.bar = '父组件的bar'
    },
    changeSigle2() {
      this.foo = '父组件的foo'
    },
    changeObject() {
      this.baz.hello = '父组件的你好'
    },
    changemodule() {
      this.$store.commit('jiankang/changeName', 'sam')
      this.$store.commit('jiankang/changeMsg2', '第二第二')
    },
    changeDept() {
      const { changeDept } = myChange(this)
      changeDept()
    }
  }
}
</script>

<style lang="less">
html,
body {
  padding: 0;
  margin: 0;
}
button {
  border: none;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 5px;
  &:hover {
    background-color: #e7e7e7;
  }
}
.vuex-container {
  height: 100vh;
  background: skyblue;
  overflow: hidden;
  padding: 20px;
  .left-top {
    display: flex;
    .son {
      // border: 1px solid #000;
      border-radius: 40px;
      overflow: hidden;
    }
  }
  h1 {
    margin: 20px;
    margin-top: 0;
    color: white;
  }
  .info {
    // border: 1px solid #000;
    padding: 20px;
    border-radius: 10px;
    width: 400px;
    padding-top: 10px;
    cursor: pointer;
    h3 {
      margin: 0;
      margin-bottom: 20px;
    }
    li {
      margin-bottom: 10px;
      color: white;
      font-size: 10px;
      font-weight: 700px;
    }
  }
  .content {
    display: flex;
    padding: 20px;
    > div {
      border-radius: 40px;
    }
  }
}
</style>
